<template>
  <div class="report-container">
    <el-row>
      <el-col :span="24" style="margin-bottom: 10px">
        <div>
          <el-date-picker
            v-model="compareDate"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions">
          </el-date-picker>
          <el-button type="primary" style="margin-left: 10px">查 询</el-button>
          <span class="load_text" v-show="loadData">数据拼命加载中...请稍后</span>
      </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" >
        <div class="tree-div">
          <el-aside width="100%">
            <el-tree
              v-loading="loadingTree"
              element-loading-text="loading"
              element-loading-spinner="el-icon-loading"
              :data="treeData"
              show-checkbox
              ref="tree"
              node-key="deviceId"
              :check-strictly="true"
              :props="defaultProps">
            </el-tree>
          </el-aside>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="chart-div">
          <CompareChart ref="compareChat"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { findDevices } from '@/api/tdevice'
import CompareChart from '@/components/charts/CompareChart'
export default {
  components: {
    CompareChart
  },
  name: 'compares',
  mounted () {
    this.requestfindDevices()
  },
  data () {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      compareDate: '',
      loadData: false,
      loadingTree: true,
      treeData: [],
      defaultProps: {
        children: 'childList',
        label: 'deviceName'
      }
    }
  },
  methods: {
    async requestfindDevices () {
      try {
        const res = await findDevices()
        const array = res.data
        console.log(array)
        for (var i = 0; i < 4; i++) {
          if (array[i].deviceId === 231) {
            this.treeData = array[i]
            console.log('找到了' + this.treeData)
            break
          }
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="less">
.report-container {
    height: calc(100vh - 50px);
    width: 100%;
    padding: 20px;
    background-color: #EBEEF5;
    .el-row .el-date-editor .el-range-separator {
      width: 10%;
    }
    .tree-div {
      background: #fff;
      height: calc(100vh - 150px);
    }
    .chart-div {
      background: #fff;
      height: calc(100vh - 150px);
    }
  }
</style>
